<template>
  <div class="add-container">
    <div class="add-top">
      <el-page-header @back="goBack" :content="gobacktitle"></el-page-header>
    </div>
    <div class="add-main">
      <div class="add-main-top">
        <div class="add-main-tital">
          <p>入库单</p>
        </div>
        <div>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="0.8rem"
            class="demo-ruleForm">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="库房名称" prop="kufangid">
                  <el-select v-model="ruleForm.kufangid" placeholder="请选择">
                    <el-option v-for="(item, index) in KufangList" :key="index" :label="item.mingcheng"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="物资区分">
                  <el-select v-model="ruleForm.wuziqf" placeholder="请选择">
                    <el-option v-for="(item, index) in $util.getWzqf()" :key="index" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="物资分类">
                  <el-select v-model="ruleForm.wuzizy" placeholder="请选择">
                    <el-option v-for="(item, index) in Wzzylist" :key="index" :label="item.zhuanyemc"
                      :value="item.zhuanyeid"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="入库状态">
                  <el-select v-model="ruleForm.zhuangtai" placeholder="请选择">
                    <el-option v-for="(item, index) in $util.getRkzt()" :key="index" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入库类型">
                  <el-select v-model="ruleForm.rukulx" placeholder="请选择">
                    <el-option v-for="(item, index) in $util.getRklx()" :key="index" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="add-main-list">
        <div class="list-button-group">
          <div class="button-item">

            <!-- @click="insertEvent()" -->
            <el-button type="primary" icon="el-icon-plus" @click="DialogOpenWuzi([])">
              新增
            </el-button>
          </div>
          <div class="button-item">
            <el-button type="danger" icon="el-icon-delete" @click="delwzDetail">
              删除
            </el-button>
          </div>
          <!-- <div class="button-item">
            <el-button type="primary" icon="el-icon-s-check" @click="importShow = true">
              导入入库单明细
            </el-button>
          </div>
          <div class="button-item">
            <el-button type="primary" icon="el-icon-s-check">
              下载模板
            </el-button>
          </div> -->
        </div>
        <div class="table-list" id="table-list">
          <ux-grid border show-overflow ref="plxTable" keep-source :height="tabheight" :highlightCurrentRow="false"
            widthResize :rules="ruleslist" @selection-change="selectChange"
            :edit-config="{ trigger: 'click', mode: 'row' }">
            <ux-table-column type="checkbox" width="50" />
            <ux-table-column type="index" title="序号" width="50"></ux-table-column>
            <!-- <ux-table-column field="wuzibm" title="物资代码"></ux-table-column> -->

            <ux-table-column field="wuzimc" title="物资名称"></ux-table-column>
            <ux-table-column field="guigexh" title="规格型号"></ux-table-column>

            <ux-table-column field="jiliangdw" title="计量单位"></ux-table-column>

            <ux-table-column field="jihuarksl" title="计划入库数量" :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.jihuarksl" type="number" :min="1" placeholder="请输入库存数量"
                  @keyup.native="scope.row.jihuarksl = oninput(scope.row.jihuarksl)" />
              </template>
            </ux-table-column>

            <ux-table-column field="picih" title="批次号" :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.picih" placeholder="请输入批次号" />
              </template>
            </ux-table-column>

            <!-- <ux-table-column field="sl" title="数量" :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.sl" type="number" :min="1" placeholder="请输入数量"
                  @keyup.native="scope.row.sl = oninput(scope.row.sl)" />
              </template>
            </ux-table-column> -->

            <ux-table-column show-overflow-tooltip field="shengchancj" title="生产厂家"
              :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.shengchancj" placeholder="请输入生产厂家" />
              </template>
            </ux-table-column>
            <ux-table-column show-overflow-tooltip field="shengchanrq" title="生产日期"
              :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-date-picker v-model="scope.row.shengchanrq" type="date" placeholder="选择日期"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </template>
            </ux-table-column>
            <ux-table-column field="bzq" title="保质期(月)" :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.bzq" type="number" placeholder="请输入保质期" />
              </template>
            </ux-table-column>
            <ux-table-column show-overflow-tooltip field="danjia" title="单价(元)"
              :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.danjia" type="number" placeholder="请输入单价" />
              </template>
            </ux-table-column>
            <!-- <ux-table-column show-overflow-tooltip field="chubeidj" title="储备等级"
              :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-input v-model.trim="scope.row.chubeidj" placeholder="请输入单价" />
              </template>
            </ux-table-column> -->
            <ux-table-column show-overflow-tooltip field="chubeidj" title="储备等级"
              :edit-render="{ autofocus: '.el-input__inner' }">
              <template v-slot:edit="scope">
                <el-select v-model="scope.row.chubeidj">
                  <el-option v-for="item in cbdjList" :key="item.value" :label="item.mingcheng"
                    :value="item.id"></el-option>
                </el-select>
              </template>
              <template v-slot="{ row }">{{ KufangListOne(row.chubeidj) }}</template>
              <!-- <template v-slot="{ row }">{{ $util.getZBDJlist(row.chubeidj) }}</template> -->
              <!-- <template v-slot="{ row }">{{ row.chubeidjmc }}</template> -->
            </ux-table-column>
            <!-- <ux-table-column show-overflow-tooltip field="je" title="金额(元)">
              <template v-slot="scope">
                <span>
                  {{ (scope.row.je = scope.row.danjia * scope.row.jihuarksl || 0) }}
                </span>
              </template>
            </ux-table-column> -->

          </ux-grid>
          <div class="submit-button">
            <el-button type="primary" icon="el-icon-circle-check" @click="submitForm('ruleForm')">
              确认
            </el-button>
            <el-button type="info" icon="el-icon-delete" @click="goBack">取消</el-button>
          </div>
        </div>
      </div>
    </div>

    <!--新增 物资 -->
    <page-1-add-wuzi ref="wuzi-dialog" @fetch-data="fetchData"></page-1-add-wuzi>
    <!-- 导入文件start -->
    <el-dialog :close-on-click-modal="false" :visible.sync="importShow" destroy-on-close title="导入文件" class="m-dialog"
      :append-to-body="true">
      <upload api-url="xqzdDetail/import" @success="uploadSuccess" />
    </el-dialog>
  </div>
</template>
<script>
import Upload from '@/components/Upload/upload'
import { insertrukud, queryKufangList } from '@/api/warehousing'
import page1AddWuzi from './page1AddWuzi.vue'

export default {
  name: 'Page1Add',
  components: { Upload, page1AddWuzi },
  props: {
    gobacktitle: {
      type: String,
      default: '新增',
      required: true,
    },
    datarow: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      show: true,
      insertData: {},
      ruleForm: {
        rkdh: '',
        wzmc: '',
        wzqf: '',
        rkzt: '',
        rklx: '',
        datalist: [],
      },
      rules: {
        rukudh: [{ required: true, message: '请输入入库单号', trigger: 'blur' }],
        kufangid: [{ required: true, message: '请选择库房', trigger: 'blur' }],


      },
      ruleslist: {
        wuzimc: [{ required: true, message: '请输入物资名称', trigger: 'blur' }],
        jihuarksl: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        chubeidj: [{ required: true, message: '请输入储备等级', trigger: 'blur' }],
        danjia: [{ required: true, message: '请输入单价', trigger: 'blur' }],
      },
      tabheight: 500,
      importShow: false,
      KufangList: [],
      cbdjList: [],
      Wzzylist: []

    }
  },
  created() { },
  mounted() {
    this.getKufangList();
    let height = document.getElementById("table-list").offsetHeight
    this.tabheight = height - 94
    let data = {
      id: this.datarow.id,
      rukudh: this.datarow.rukudh,
      kufangid: this.datarow.kufangid,
      wuziqf: this.datarow.wuziqf,
      zhuangtai: this.datarow.zhuangtai,
      rukulx: this.datarow.rukulx,
    }
    let arr = []
    console.log(this.datarow)
    if (JSON.stringify(this.datarow) != "{}") {
      this.datarow.rukudmxList.forEach(element => {
        arr.push({
          wuziid: element.wuziid,
          wuzibm: element.wuzibm,
          wuzimc: element.wuzimc,
          wuzizy: element.wuzizy,
          guigexh: element.guigexh,
          jiliangdw: element.jiliangdw,
          jihuarksl: element.jihuarksl,
          picih: element.picih,
          shengchancj: element.shengchancj,
          shengchanrq: element.shengchanrq,
          bzq: element.bzq,
          danjia: element.danjia,
          chubeidj: element.chubeidj,
          chubeidjmc: element.chubeidjmc,

        })

      });
    }
    data.rukudmxList = arr;
    this.ruleForm = Object.assign({}, data)

    this.$nextTick(() => {
      this.$refs.plxTable.reloadData(this.ruleForm.rukudmxList)
    })
  },
  methods: {
    goBack() {
      this.$parent.addshow = false
    },

    DialogOpenWuzi(row) {
      this.$refs['wuzi-dialog'].showEdit(row)
    },
    submitForm(formName) {


      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.rukudmxList = this.$refs.plxTable.getTableData().fullData
          // const msg = await insertrukud({ kufangid: "14547", rukudmxList: [] })
          const mxLen = this.$refs.plxTable.getTableData().fullData

          if (mxLen.length == 0) {
            this.$message({
              message: '请添加明细',
              type: 'warning',
            });
            return;
          }
          this.$refs.plxTable.validate(true).then(async (data) => {
            if (data) {
              // 有错误
            }
            else {
              const msg = await insertrukud(this.ruleForm)
              this.$message({
                message: msg.msg,
                type: 'warning',
              });
              if (this.gobacktitle == '新增') {
                this.resetForm();//重置表单
              }
              this.$parent.resetlist()

            }
          })
        } else {
          return false
        }
      })
    },

    resetForm(formName) {
      this.ruleForm = Object.assign({ rukudmxList: [] }, [])
      this.$nextTick(() => {
        this.$refs.plxTable.reloadData([])
      })
      // this.$refs[formName].resetFields()
    },
    selectChange(e) { },
    // 添加插入行
    async insertEvent(row) {
      let record = {
        wuziid: this.insertData[0].id,
        wuzimc: this.insertData[0].wuzimc,
        wuzibm: this.insertData[0].wuzibm,

        guigexh: this.insertData[0].guigexh,
        jiliangdw: this.insertData[0].jiliangdw,
      }


      // 加入行, 表示加入行的row对象，row为空则插入第一行，为-1插入最后一行
      let { row: newRow } = await this.$refs.plxTable.insertRow(record)
      // 激活单元格编辑
      await this.$refs.plxTable.setActiveRow(newRow)
    },
    delwzDetail() {
      this.$refs.plxTable.remove(this.$refs.plxTable.getCheckboxRecords())
    },
    uploadSuccess() {
      this.importShow = false
    },
    oninput(num) {
      return num.replace(/\D/g, '')
    },
    async getKufangList() {
      //库房
      const kfData = await queryKufangList();
      this.KufangList = kfData.data

      //等级
      this.cbdjList = await this.$util.getZBDJlist()

      //物资分类
      this.Wzzylist = await this.$util.getWzzy()

    },
    KufangListOne(id) {
      if (id && this.cbdjList.length > 0) {
        let datarow = this.cbdjList.filter(item => item.id == id);
        return datarow[0].mingcheng;
      }
      return null
    },
    fetchData(data) {
      this.insertData = data
      this.insertEvent();
    }

  },
}
</script>
<style lang="scss" scoped>
.add-container {
  position: fixed;
  left: 0;
  top: .75rem;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #f6f8f9;
  padding: 0 .2rem 1rem .2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .add-top {
    padding: .10rem 0;

    ::v-deep .el-page-header__title {
      font-size: .16rem !important;
    }
  }

  .add-main {
    flex: 1;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .add-main-top {
      padding: .2rem;
      background: #fff;
      border-radius: .05rem;

      .add-main-tital {
        font-size: .18rem;
        border-left: .10rem solid rgb(121, 189, 255);
        padding-left: .10rem;

        p {
          margin: 0;
        }
      }

      .search-gropu-item {
        margin-top: .20rem;
        width: 90%;
        display: flex;
        // label {
        //   white-space: nowrap;
        //   line-height: 32px;
        //   margin-right: 10px;
        // }
      }

      .el-select {
        width: 100%;
      }
    }

    .add-main-list {
      flex: 1;
      margin-top: 20px;
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
      }
    }

    .el-button {
      font-size: .14rem !important;
    }

    ::v-deep {
      .elx-table--header-wrapper {
        background-color: rgb(233, 243, 255);
      }

      .elx-table {
        font-size: 0.14rem !important;
      }

      .elx-body--column {
        height: .48rem !important;
        line-height: .24rem;
      }

      .elx-header--column {
        background-image: none !important;
        height: .48rem !important;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input--inner {
        width: 100% !important;
      }

      .el-form-item--small.el-form-item {
        margin-bottom: 0px;
        margin-top: 18px;
      }
    }

    .submit-button {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>